<template>
  <div class="all">
    <header v-show="!showNav">
      <div class="div">
        <img src="../../../assets/返回.png" @click="back()" alt="">
        <span class="solid" @click="back()">返回</span>
      </div>
      <div class="div">
        <span>{{typeTitle}}</span>
      </div>
      <div class="div" @click="Add()">
        <img src="../../../assets/蓝添加.png" alt="">
        <span class="solid">{{typeLabel}}申请</span>
      </div>
    </header>
    <div class="content">
      <van-tabs
        sticky
        offset-top="44px"
        v-model="active"
        swipeable
        animated
        color="#1da4f2"
        title-active-color="#1da4f2"
        line-width="40px"
        line-height="2px"
        @change="onchange"
      >
        <van-tab
          v-for="(item, index) in (type == 1 ? tabList : tabList1)"
          :key="index"
          :title="item.name"
          :name="item.id">
<!--          (type == 1 ? tabList : tabList1)-->
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-empty
            style="width: 100%;height: 60%"
            v-show="orderList.length <= 0 && isLoading === false"
            class="custom-image"
            :image="require('../../../assets/空两本书.png')"
            :description="nullOrderText"
          />

            <div>
              <div class="box" v-for="(item, index) in orderList" :key="index" @click="clickBox(item)">
                <div class="boxTop">
                  <div class="boxTop_left">
                 <span>
                    <img v-if="item.doctorPhoto !== null && item.doctorPhoto !== undefined && item.doctorPhoto !== ''"
                         class="photo" :src="item.doctorPhoto" alt="">
                  <img v-else class="photo" src="../../../assets/男医生@2x.png" alt="">
                 </span>
                    <span style="display: flex;
  flex-direction: column">
                      <a>{{item.NICK_NAME}}
                          <button v-show="item.team_id" class="tagTuandui">团队</button>
                      </a>
                      <a style="font-size: 11px;color: #333">{{item.MAJOR}} | {{item.DEPART}}</a>
                  </span>
                  </div>
                  <div class="boxTop_right ">
                    <span v-show="item.status == 1" class="red">待支付</span>
                    <span v-show="item.status == 4" class="green">{{typeLabel}}中</span>
                    <span v-show="item.status == 5" class="blue">已结束</span>
                    <!--                `refund_status` tinyint(4) DEFAULT NULL COMMENT '退款状态 1:退款中;2:退款成功;3:退款状态',-->
                    <span v-show="item.status == 6 && item.refund_status == 1" class="blue">订单已取消，退款中</span>
                    <span v-show="item.status == 6 && item.refund_status == 2" class="blue">订单已取消，退款成功</span>
                    <span v-show="item.status == 6 && item.refund_status == 3" class="blue">订单已取消，退款失败</span>
                    <span  v-show="item.status == 6 && item.refund_status == null">订单已取消</span>

                    <span v-show="item.status == 2 && (type == 2 || type == 5)" class="green">待接单</span>
                    <span v-show="item.status == 3 && type == 2  && item.is_signin == 0" class="green">预约已确认</span>
                    <span v-show="item.status == 3 && type == 2  && item.is_signin == 1" class="green">待接诊</span>
                    <span v-show="item.status == 3 && type == 5" class="green">待接诊</span>

                    <span v-show="item.status == 3 && type == 1" class="green">待接诊</span>

                  </div>
                </div>
                <div class="boxContent">
                  <div class="boxContent_text">
                    <span style="white-space: nowrap">自述情况：</span>
                    <span style="width: 80%;display: flex;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        -webkit-line-clamp:2;
                        word-break: break-all;
                        -webkit-box-orient:vertical;
                        display: -webkit-box;
  ">
                      {{item.illness_desc}}</span>
                  </div>
                </div>
                <div class="boxContent_bottom">
                  <div class="time">
                    <p v-show="item.status == 1 || item.status == 3 || (item.status == 2 && (type == 2 || type == 5))">申请时间：{{item.created_at}} </p>
                    <p v-show="item.status == 4 || item.status == 5">开始{{typeLabel}}时间：{{item.start_time}}</p>
                    <p v-show=" item.status == 5">结束{{typeLabel}}时间：{{item.end_time}}</p>
                    <p v-show="item.status == 4">已{{typeLabel}}：
                      {{GetDateDiff(item.start_time)}}
<!--                      {{GetDateDiff(new Date() - new Date(item.start_time))}}-->
                    </p>
                    <p v-show="item.status == 6">订单取消时间：{{item.cancel_time}}</p>
                    <p v-show="item.status == 6 && item.cancel_type !== 3">订单取消原因：
                      <a v-show="item.cancel_type == 1">手工操作</a>
                      <a v-show="item.cancel_type == 2 && item.refund_status == null">支付超时</a>
                      <a v-show="item.cancel_type == 2&& item.refund_status !== null">接诊超时</a>
                      <a v-show="item.cancel_type == 4">{{item.cancel_reason}}</a>
                      <!--                  '取消类型 1:患者手动;2:系统自动;3:医生拒诊'-->
                    </p>
                    <p v-show="item.cancel_type == 3">退诊原因：{{item.cancel_reason}}</p>
  <!--视频-->
                    <p v-show="(item.status == 1 || item.status == 2) && item.type ==2">
                      预约{{typeLabel}}时间：{{item.book_date}}  {{item.book_time_start}} ~ {{ item.book_time_end}}</p>

                    <p v-show="(item.status == 2 || item.status == 3) && type == 5">
                      预约{{typeLabel}}时间：{{item.book_date}}  {{item.book_time_start}} ~ {{ item.book_time_end}} </p>

                    <p v-show="(item.status == 3) && item.type ==2">
                      {{typeLabel}}时间：{{item.book_date}}  {{item.book_time_start}} ~ {{ item.book_time_end}}</p>
                  </div>
                </div>
                <div class="price">
                  <span >订单金额：</span>
                  <span>￥{{item.amount}}</span>
                </div>
                <div class="boxBottom">
                  <div class="">
                    <!--                 待接诊 -->
                    <span class="qianDao"  v-show="(item.status == 3  && item.type == 2 && item.is_signin == 0)">
                       <img
                         style="width: 15px;height: 15px;" src="../../../assets/未签到.png" alt="">
                        未签到
                    </span>

                    <!--               待接诊已确认 -->
                    <span class="qianDao" v-show="(item.status == 3  && item.type == 2 && item.is_signin == 1)">
                      <img
                        style="width: 15px;height: 15px;" src="../../../assets/已签到.png" alt="">
                      <a style="color: #1da4f2">
                        已签到 ({{formatDate(item.signin_time)}})
                      </a>
                    </span>
                  </div>

                  <div style="display: flex">
                    <!--              视频咨询  status 3 已确认 签到-->
                    <button class="box_button btnBlack"
                            @click.stop="qianDao(item)"
                            v-show="item.status == 3 && type == 2 && item.is_signin == 0 && item.pList && item.pList.length>0 && userid == item.pList[0].partake_user_id">签到</button>
                    <button class="box_button btnBlack"
                            @click.stop="houZhen(item)"
                            v-show="item.status == 3 && type == 2 && item.is_signin == 1 && item.pList && item.pList.length>0 && userid == item.pList[0].partake_user_id">进入候诊室</button>

                    <!--              未支付取消-->
                    <button class="box_button btnBlack" @click.stop="cancel(item)"
                            v-show="item.status == 1 && userid == item.op_user_id">取消订单</button>

                    <!--               未接诊取消-->
                    <button class="box_button btnBlack" @click.stop="weiCancal(item)"
                            v-show="(item.status == 3 && item.type ==1) && userid == item.op_user_id ">取消订单</button>

  <!--                  待接诊取消-->
                    <button class="box_button btnBlack" @click.stop="weiJieQuXiaoShiPin(item)"
                            v-show="item.status == 2 && ((item.type == 2 && item.pList && item.pList.length>0 && userid == item.pList[0].partake_user_id)|| (item.type == 5 && userid == item.op_user_id))">取消订单</button>

                    <!--                未支付 支付-->
                    <button class="box_button btnBule" @click.stop="pay(item)"
                            v-show="item.status == 1 && userid == item.op_user_id">立即支付</button>

                    <button class="box_button btnBlack" @click.stop="guoCheng(item)"
                            v-show="item.status == 5">{{typeLabel}}记录</button>
                    <button class="box_button btnBule" @click.stop="pingJia(item)"
                            v-show="item.status == 5">服务评价</button>

                    <button class="box_button btnBule" @click.stop="jumpZixun(item)"
                            v-show="item.status == 4 && type == 1">继续{{typeLabel}}</button>
                  </div>

                </div>
              </div>
            </div>
            <div  style="width: 100%;height: 50vh;display: flex;align-items: center;justify-content: center" v-show="isLoading">
              <van-loading size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
            </div>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
    <van-overlay :show="xuzhiShow" :lock-scroll="false"  @click="xuzhiShow = false">
      <div class="wrapper" >
        <div class="block" @click.stop="">
          <div class="xuzhiTop">
<!--            <span v-show="type == 1">图文咨询</span>-->
<!--            <span v-show="type == 2">视频咨询</span>-->
            <span>{{typeTitle}}</span>
            服务须知
          </div>
          <div class="xuzhiContent">
            <ul v-show="type == 1">
              <li >
                1、图文咨询支付完成后，如果提供咨询者没有在24小时内接诊，系统将自动取消订单并退款至您的原支付账户。
              </li>
              <li>
                2、请您将咨询人的相关资料提前上传，并清晰地描述病情变化，症状，体征，诊疗经过；将自己需要咨询的问题以详细准确的文字放入咨询申请中，以便于提供咨询者提前查阅和思考，提高服务质量和效率。
              </li>
              <li>
                3、为了更好的咨询服务，提供咨询人有权调用咨询人在平台中已经录入的档案信息。
              </li>
              <li>
                4、咨询建议在48小时内可以修改，超时不可修改。
              </li>
              <li>
                5、在提供咨询者确认完成咨询后，系统将自动结束服务。（只有提供咨询者可以结束咨询，咨询者不可结束咨询。）
              </li>
            </ul>
            <ul v-show="type == 2">
              <li>
                1、{{typeTitle}}支付完成后，如果提供咨询者没有在24小时内接诊，系统将自动取消订单并退款至您的原支付账户。
              </li>
              <li>
                2、请您将咨询人的相关资料提前上传，并清晰地描述病情变化，症状，体征，诊疗经过；将自己需要咨询的问题以详细准确的文字放入咨询申请中，以便于提供咨询者提前查阅和思考，提高服务质量和效率。
              </li>
              <li>
                3、为了更好的咨询服务，提供咨询人有权调用咨询人在平台中已经录入的档案信息。
              </li>
              <li>
                4、咨询建议在48小时内可以修改，超时不可修改。
              </li>
              <li>
                 5、在提供咨询者确认完成咨询后，系统将自动结束服务。（只有提供咨询者可以结束咨询，咨询者不可结束咨询。）
              </li>
            </ul>
            <ul v-show="type == 5">
              <li>
                1、会诊申请由患者本人同意后发起，申请人填写《会诊申请单》，并注明会诊目的和邀请专家的条件。
              </li>
              <li>
                2、会诊中心接到会诊申请后，对于可以满足的会诊需求将尽快受理并指定会诊助理联系您，会诊助理在整个会诊过程中辅助您和网医完成会诊。
              </li>
              <li>
                3、受理后的会诊会在7个工作日内组织实施，如需加急到48小时内开始会诊，需加收会诊总费用的20%。
              </li>
              <li>
                4、为了提高会诊质量，更好的达成会诊目的，请您务必按照会诊助理的提示将健康档案在会诊前3天上传并完善。
              </li>
              <li>
                5、请您在会诊开始前10分钟进入网上诊室候诊。
              </li>
              <li>
                6、会诊过程中患者需要按照会诊主持人的要求据实回答各会诊专家提出的有关疾病病史、会诊目的、治疗方案选择等问题，以便确定会诊结果。
              </li>
              <li>
                7、会诊主持人会根据需要，在和您交流结束后的专家讨论阶段，临时要求会诊助理关闭患者端的视频会话，请您充分理解。
              </li>
              <li>
                8、会诊形成的最终结论由会诊主持人负责向您进行解读。
              </li>
              <li>
                9、会诊申请前请仔细查看会诊收费标准及退费说明，随意取消会诊将会给您造成经济损失。
              </li>
              <li>
                10、非患者原因所导致会诊无法进行，您可申请全额退费。
              </li>
            </ul>
          </div>
          <div class="bottom">
            <div class="select">
              <img src="../../../assets/蓝未选择.png" @click.stop="isSelect = true" v-if="isSelect === false" alt="">
              <img src="../../../assets/题目选择.png" @click.stop="isSelect = false" v-else-if="isSelect === true" alt="">
              <span @click.stop="isSelect = !isSelect" v-show="type ==1">勾选即代表您已阅读并同意《图文咨询服务须知》的内容</span>
              <span @click.stop="isSelect = !isSelect" v-show="type == 2 ||type ==5">勾选即代表您已阅读并同意《{{typeTitle}}服务须知》的内容</span>
            </div>
            <div class="next" @click.stop="next">
              确定
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
    <van-dialog v-model="endShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认结束此次咨询吗？"
                @confirm="endConfirm()"
                show-cancel-button>
    </van-dialog>
    <van-dialog v-model="cancelShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认取消此订单吗？"
                @confirm="cancelConfirm()"
                show-cancel-button>
    </van-dialog>
    <van-dialog v-model="weiCancalShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认取消此订单吗？"
                @confirm="weiCancalConfirm()"
                show-cancel-button>
    </van-dialog>
    <van-dialog v-model="qianDaoShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认签到吗？"
                @confirm="qianDaoConfirm()"
                show-cancel-button>
    </van-dialog>
    <van-dialog v-model="weiJieQuXiaoShiPinShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认取消此订单吗？"
                @confirm="weiJieQuXiaoShiPinConfirm()"
                show-cancel-button>
    </van-dialog>
    <div v-show="quxiaoisLoading"
         style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;position: absolute;top: 0;background: rgba(0, 0, 0, 0.5)" >
      <van-loading size="24px" type="spinner" color="#fff">订单取消中...</van-loading>
    </div>
  </div>
</template>

<script>
import {Toast} from 'vant'
import jutils from 'jutils-src'

export default {
  name: 'TuWenHome',
  data () {
    return {
      // 1:待支付;2:待预约;3:待服务;4:服务中;5:已完成;6:已取消'
      tabList: [
        {
          name: '全部',
          id: ''
        },
        {
          name: '待支付',
          id: '1'
        },
        {
          name: '待接诊',
          id: '3'
        },
        {
          name: '咨询中',
          id: '4'
        },
        {
          name: '已结束',
          id: '5'
        },
        {
          name: '已取消',
          id: '6'
        }
      ],
      tabList1: [
        {
          name: '全部',
          id: ''
        },
        {
          name: '待支付',
          id: '1'
        },
        {
          name: '待接单',
          id: '2'
        },
        {
          name: '待接诊',
          id: '3'
        },
        {
          name: '咨询中',
          id: '4'
        },
        {
          name: '已结束',
          id: '5'
        },
        {
          name: '已取消',
          id: '6'
        }
      ],
      active: '',
      orderList: [],
      xuzhiShow: false,
      isSelect: false,
      nullOrderText: '',
      userid: '',
      ITEM: '',
      endShow: false,
      cancelShow: false,
      weiCancalShow: false,
      isLoading: true,
      qianDaoShow: false,
      weiJieQuXiaoShiPinShow: false,
      quxiaoisLoading: false
    }
  },
  computed: {
    typeLabel: function () {
      if (this.type !== 5) {
        return '咨询'
      } else {
        this.$set(this.tabList1[4], 'name', '会诊中')
        return '会诊'
      }
    },
    typeTitle: function () {
      if (this.type === 1) {
        document.title = '图文咨询'
        return '图文咨询'
      } else if (this.type === 2) {
        document.title = '视频咨询'
        return '视频咨询'
      } else if (this.type === 5) {
        document.title = '远程会诊'
        return '远程会诊'
      }
    },
    timeIng () {
      return function (nowTime, oldTime) {
        let date = new Date(new Date(nowTime) - new Date(oldTime))
        let hour = date.getUTCHours()
        let min = date.getUTCMinutes()
        if (hour < 10) {
          hour = '0' + hour
        }
        if (min < 10) {
          min = '0' + min
        }
        if (Number(hour) <= 0) {
          return min + '分钟'
        } else {
          return hour + '小时' + min + '分钟'
        }
      }
    },
    searchVal () {
      return this.$route.query.searchVal
    },
    type () {
      return Number(this.$route.query.type)
    },
    showNav () {
      return this.$route.query.showNav
    }
  },
  watch: {
    type (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.getData()
      }
    },
    searchVal (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.getData()
      }
    }
  },
  mounted () {
    this.userid = this.$utils.getUrlKey('userid')
    this.type = Number(this.$utils.getUrlKey('type'))
    this.getData()
  },
  methods: {
    // 下拉刷新
    onRefresh () {
      setTimeout(() => {
        this.getData()
        Toast('刷新成功')
        this.isLoading = false
      }, 1000)
    },
    formatDate (date) {
      var date = new Date(date)

      var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'

      var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'

      var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())

      return hh + mm + ss
    },
    // 未接单 取消按钮
    weiJieQuXiaoShiPinConfirm () {
      this.quxiaoisLoading = true
      this.$http.weiJieQuXiaoShiPin({id: this.ITEM.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.weiJieQuXiaoShiPinShow = false
            this.getData()
            this.quxiaoisLoading = false
            Toast('订单取消成功')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    weiJieQuXiaoShiPin (item) {
      this.ITEM = item
      this.weiJieQuXiaoShiPinShow = true
    },
    // 进入候诊室
    houZhen (item) {
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        window.WebViewJavascriptBridge.callHandler('goToConsultWaitRoom', item.id, function (responseData) {})
      } else {
        Toast('请在App上使用本功能')
      }
    },
    // 签到确认按钮
    qianDaoConfirm () {
      this.$http.updateInQianDao({id: this.ITEM.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getData()
            this.qianDaoShow = false
            Toast('签到成功')
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 签到
    qianDao (item) {
      this.ITEM = item
      this.$http.updateInQianDao({id: this.ITEM.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getData()
            this.qianDaoShow = false
            Toast('签到成功')
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
      // this.qianDaoShow = true
      // updateInQianDao
    },
    // 计算 已会诊时长
    GetDateDiff (beginTime) {
      let day1 = new Date(beginTime).getTime()
      let day2 = new Date().getTime()
      let time = jutils.getTimeInterval(day1, day2)
      return time
      /*   if (mss <= 0) {
        mss = 0
      }
      var date = new Date(mss)
      let hour = date.getUTCHours()
      let min = date.getUTCMinutes()
      // if (hour < 10) {
      //   hour = '0' + hour
      // }
      // if (min < 10) {
      //   min = '0' + min
      // }
      if (Number(hour) <= 0) {
        return min + '分钟'
      } else {
        return hour + '小时' + min + '分钟'
      } */
    },
    // 查看咨询过程
    guoCheng (item) {
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        window.WebViewJavascriptBridge.callHandler('consultChatHistory', item.id, function (responseData) {})
      } else {
        Toast('请在App上使用本功能')
      }
    },
    // 结束 确认按钮
    endConfirm () {
      this.$http.endTuWenZhen({id: this.ITEM.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getData()
            Toast('操作成功，此次' + this.typeLabel + '已结束')
            this.endShow = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 结束
    jieShu (item) {
      this.ITEM = item
      this.endShow = true
    },
    pingJia (item) {
      Toast('正在开发中，敬请期待...')
      // this.$router.push({path: '/serviceEvaluation', query: {id: item.id}})
    },
    // 点击跳转安卓聊天
    jumpZixun (item) {
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        window.WebViewJavascriptBridge.callHandler('doctorPatientChat', item.doc_user_id + ',' + item.NICK_NAME + ',' + item.type + ',' + item.id, function (responseData) {})
      } else {
        Toast('请在App上使用本功能')
      }
    },

    // 立即预约跳转 视频咨询
    YuYue (item) {
      sessionStorage.setItem('order', JSON.stringify(item))
      this.$router.push({path: '/tuWenYuyue', query: {id: item.id}})
    },
    // 未接诊取消订单 确认
    weiCancalConfirm () {
      this.quxiaoisLoading = true
      this.$http.weiJieQuXiao({id: this.ITEM.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.weiCancalShow = false
            this.getData()
            this.quxiaoisLoading = false
            Toast('订单取消成功')
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 未接诊取消订单
    weiCancal (item) {
      this.ITEM = item
      this.weiCancalShow = true
    },
    // 患者端 未支付 取消订单
    cancel (item) {
      this.ITEM = item
      this.cancelShow = true
    },
    // 取消订单确认按钮
    cancelConfirm () {
      this.quxiaoisLoading = true
      this.$http.weiZhiQuXiao({id: this.ITEM.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getData()
            this.cancelShow = false
            this.quxiaoisLoading = false
            Toast('订单取消成功')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 立即支付跳转
    pay (item) {
      sessionStorage.setItem('order', JSON.stringify(item))
      this.$router.push({path: '/third', query: {type: this.type}})
    },
    // 点击查看详情
    clickBox (data) {
      console.log(data)
      if (data.type == 2 && data.pList && data.pList.length > 0 && this.userid !== data.pList[0].partake_user_id) {

      } else if (data.status == 4 && data.type !== 5) {
        this.jumpZixun(data)
      } else if ((data.status == 3 || data.status == 4) && data.type == 5) {
        if (sessionStorage.getItem('sys') === 'ANDROID') {
          window.WebViewJavascriptBridge.callHandler('startGroupPageChat', data.id + ',' + data.im_group_id, function (responseData) {})
        }
      } else {
        sessionStorage.setItem('order', JSON.stringify(data))
        this.$router.push({path: '/tuWenOrder', query: {id: data.id, userid: this.userid, type: this.type}})
      }
    },
    // 点击医师建议
    jianyi (id) {
      this.$router.push({path: '/viewWenzhenSuggest', query: {id: id, type: this.type}})
    },
    // 获取不同状态 的订单
    getData () {
      this.isLoading = true
      let val = ''
      if (this.searchVal) {
        val = this.searchVal
      } else {
      }
      this.$http.findAllInquiry({name: val,
        type: this.type,
        status: this.active})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.isLoading = false
            this.orderList = res.data.data
            // 1:待支付;2:待预约;3:待服务;4:服务中;5:已完成;6:已取消'
            if (this.active === '') {
              this.nullOrderText = '暂无任何订单哦'
            } else if (Number(this.active) === 1) {
              this.nullOrderText = '暂无待支付订单哦'
            } else if (Number(this.active) === 2 && this.type == 1) {
              this.nullOrderText = '暂无待预约订单哦'
            } else if (Number(this.active) === 2 && (this.type == 2 || this.type == 5)) {
              this.nullOrderText = '暂无待接单订单哦'
            } else if (Number(this.active) === 3 && this.type == 1) {
              this.nullOrderText = '暂无待接诊订单哦'
            } else if (Number(this.active) === 3 && (this.type == 2 || this.type == 5)) {
              this.nullOrderText = '暂无待接诊订单哦'
            } else if (Number(this.active) === 4) {
              this.nullOrderText = '暂无' + this.typeLabel + '中订单哦'
            } else if (Number(this.active) === 5) {
              this.nullOrderText = '暂无已结束订单哦'
            } else if (Number(this.active) === 6) {
              this.nullOrderText = '暂无已取消订单哦'
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    // onClick () {
    //   this.orderList = []
    //   this.getData()
    // },
    onchange () {
      this.orderList = []
      this.getData()
    },
    // 返回
    back () {
      // this.$router.push({path: '/'})
      this.$router.history.go(-1)
    },
    // 点击添加
    Add () {
      var obj = {
        'type': this.type, // '咨询类型 1:图文咨询;2:视频咨询',
        'doc_user_id': '', // '医生ID',
        'illness_desc': '',
        'doc_advise': '',
        'doc_amount_type': '', // 订单价格类型
        'amount': '', // 咨询订单价格
        'is_doc_medical': '', // 是否需要医生指导用药 0:否;1:是
        'is_hos_visit': '', // 是否曾到医疗机构就诊 0:否;1:是
        'Iimg': [], // 图片集合
        'Clist': [],
        'Jlist': [],
        'weight': '', // 体重
        'patient_id': '' // 被服务id
      }
      sessionStorage.setItem('DATA', JSON.stringify(obj))
      sessionStorage.removeItem('peopleInfo')
      sessionStorage.removeItem('doctorInfo')
      sessionStorage.removeItem('FirstData')
      sessionStorage.removeItem('SecondData')
      sessionStorage.removeItem('order')
      sessionStorage.removeItem('tuWenData')
      // this.$router.push({path: '/xuZhi'})
      this.xuzhiShow = true
    },
    // 须知下一步
    next () {
      if (this.isSelect === true) {
        this.$router.push({path: '/first', query: {'type': this.type}})
      } else {
        Toast('请先勾选我同意服务须知的所要求的全部内容')
      }
    }
  },
  destroyed () {
    sessionStorage.removeItem('peopleInfo')
    sessionStorage.removeItem('doctorInfo')
    sessionStorage.removeItem('FirstData')
    sessionStorage.removeItem('tuWenPeopleServedData')
    sessionStorage.removeItem('SecondData')
    sessionStorage.removeItem('tuWenData')
    sessionStorage.removeItem('yuyueData')
    sessionStorage.removeItem('doctorInfo')

    sessionStorage.setItem('userid', this.userid)
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
    overflow: auto;
  }
  header{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
    background: white;
    position: sticky;
    top: 0;
    z-index: 5;
  }
  .div{
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    font-family: "PingFang SC";
    font-size: 15px;
    font-weight: bold;
  }
  .div img{
    margin-right: 5px;
  }
  .div:nth-child(1) img{
    height: 13px;
    width: 7px;
    margin-left: 15px;
  }
  .div:nth-child(3) img{
    width: 13px;
    height: 13px;
    margin-right: 5px;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .div:nth-child(2){
    justify-content: center;
  }
  .div:nth-child(3){
    justify-content: flex-end;
  }
  .solid{
    color: #1DA4F2;
  }
  .box{
    width: 95%;
    border-radius: 10px;
    padding: 10px 0;
    box-sizing: border-box;
    background: white;
    margin: 10px auto auto auto;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.05);
  }
  .content .box:last-child{
    margin-bottom: 30px !important;
  }
  .boxTop, boxBottom{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .photo{
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border-radius: 50%;
    object-fit: cover;
  }
  .boxTop{
    justify-content: space-between;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
  }
  .boxTop_left{
    /*width: 80%;*/
    height: 100%;
    display: flex;
    align-items: center;
  }
  .boxTop_left span{
    display: flex;
  }
.boxTop_right{
  font-size: 15px;
}
  .boxContent{
    min-height: 50px;
    /*background: rgba(250, 249, 254, 1);*/
    box-sizing: border-box;
    overflow: hidden;
    border-top: 1px solid #e5e5e5;
    padding: 10px;
    box-sizing: border-box;
  }
  .boxContent_text{
    width: 100%;
    /*height: 100%;*/
    font-size: 15px;
    display: flex;
    text-align: justify;
    word-break: break-all;
    font-family: "PingFang SC";
  }
  .boxContent_text p{
    width: 100%;
    line-height: 1.8;
    /*// 单行*/
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    margin-bottom:8px;
  }
  .price{
    min-height: 40px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /*justify-content: flex-end;*/
    /*border-top: 1px solid #E5E5E5;*/
    border-bottom: 1px solid #E5E5E5;
  }
  .price span:nth-child(2){
    font-weight: bold;
  }
  .boxContent_bottom{
    display: flex;
    /*height: 44px;*/
    /*min-height: 44px;*/
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    /*border-bottom: 1px solid #E5E5E5;*/
    /*border-top: 1px solid #E5E5E5;*/
    padding: 5px 10px 5px 10px;
    box-sizing: border-box;
  }
  .boxContent_bottom p {
    line-height: 1.7;
    /*margin-bottom: 3px;*/
  }
  .boxBottom{
    height: 35px;
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    /*flex-direction: row-reverse;*/
    padding: 0 10px;
    box-sizing: border-box;
  }
  .boxBottom .qianDao{
    height: 100%;
    display: flex;
    align-items: center;
    /*position: fixed;*/
    /*left: 30px;*/
  }
  .qianDao img{
    margin-right: 8px;
  }
  .box_button{
    /*width: 75px;*/
    min-width: 75px;
    height: 29px;
    border-radius: 5px;
    background: white;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    font-family: "PingFang SC";
    margin-left: 10px;
    padding: 0 5px;
    box-sizing: border-box;
  }
  .colorGary{
    color: #999999;
  }
  .btnGary{
    border: 1px solid #E5E5E5;
    color: #999;
  }
  .btnRed{
    color: #E3170D;
    border: 1px solid #E3170D;
  }
  .btnBlack{
    color: #333;
    border: 1px solid #999;
  }
  .red{
    color: rgba(227, 23, 13, 1);
  }
  .blue{
    color: #1DA4F2;
  }
  .btnBule{
    color: #1da4f2;
    border: 1px solid #1DA4F2;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90%;
  }
  /deep/ .van-overlay{
    z-index: 999;
  }
  .block {
    width: 90%;
    height: 70%;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
  }
  .xuzhiTop{
    width: 100%;
    height: 44px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #E5E5E5;
  }
  .xuzhiContent{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    height: 70%;
    overflow: auto;
  }
  .xuzhiContent ul li{
    margin-bottom: 10px;
    font-size: 15px;
    color: #333333;
  }
  .select{
    width: 100%;
    font-size: 15px;
    color: #1DA4F2;
    display: flex;
    min-height: 44px;
    background: #FFFFFF;
    display: flex;
    /*align-items: center;*/
  }
  .select img{
    width: 16px;
    height: 16px;
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 1.5px;
  }
  .next{
    width: 100%;
    height: 44px;
    color: #1DA4F2;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #E5E5E5;
  }
  .bottom{
    background: #fff;
    width: 100%;
    position: absolute;
    bottom: 0;
  }
  .blue{
    color: #1DA4F2;
  }
  .green{
    color: rgba(46, 196, 155, 1);
  }
  /deep/ .van-tab{
    font-size: 15px;
  }
  .tagTuandui{
    font-size: 11px;
    min-height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    background: linear-gradient(90deg, #F9BD77, #FFED91);
    border-radius: 19px;
    border: none;
    color: #A8610B;
    margin-left: 10px;
  }
</style>
